﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Telephone call listener</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        // TODO use jQuery UI

        $(document).ready(function () {
            var subscriptionIdKey = "SubscriptionId";

            function writeErrorToLog(entry) {
                writeToLog("error: " + evt.data);
            }

            function writeToLog(entry) {
                $("#log").append(entry + "<br />");
            }

            function connect(susbcriptionId) {
                //var uri = "wss://events.zintra.eu:443/sub";
                var uri = "ws://events.zintra.eu:80/sub";

                try {
                    var socket = new WebSocket(uri);
                    //var socket = new WebSocket(uri, susbcriptionId);
                    socket.onopen = function () {
                        writeToLog("connected<br /><hr />");
                        socket.send("Subscription: " + susbcriptionId);
                    }
                    socket.onmessage = function (evt) {
                        var telephoneCall = JSON.parse(evt.data).TelephoneCall;
                        writeToLog("from <b>" + telephoneCall.FromNumber + "</b> to <b>" + telephoneCall.ToNumber + "</b> on " + telephoneCall.Time);
                    }
                    socket.onerror = function (evt) {
                        writeErrorToLog(evt.data);
                    }
                    socket.onclose = function () {
                        writeToLog("disconnected<br /><hr />");
                    }
                } catch (exception) {
                    writeErrorToLog(exception);
                }
            };

            if (!("WebSocket" in window)) {
                // No WebSocket support found
                writeToLog("Your browser does not support WebSockets. Please use a browser with WebSocket support.");
            } else {
                // Has WebSocket support
                var susbcriptionId = localStorage.getItem(subscriptionIdKey);
                if (susbcriptionId != null) {
                    connect(susbcriptionId);
                }
            }

            if (typeof (localStorage) == "undefined") {
                writeToLog("Your browser does not support HTML5 localStorage. Please use a browser with localStorage support.");
                $('#activationForm').submit(function () {
                    $('input[type=submit]', this).attr('disabled', 'disabled');
                });
            }
            else {
                $('#activationForm').submit(function () {
                    var activationKey = $('input[name=ActivationKey]', this).val();
                    var uri = "http://app.zintra.eu/Products/785b35db-b805-4bc1-8758-9f0100eb866c/subscriptions";
                    $.ajax({
                        type: "POST",
                        url: uri,
                        data: '"' + activationKey + '"',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            try {
                                localStorage.setItem(subscriptionIdKey, data.SubscriptionId);
                                connect(data.SubscriptionId);
                            } catch (e) {
                                if (e == QUOTA_EXCEEDED_ERR) {
                                    writeToLog("localStorage quota exceeded!");
                                }
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            writeToLog(textStatus + " : " + errorThrown);
                        }
                    });

                    //localStorage.getItem(subscriptionIdKey); // get
                    //localStorage.removeItem(subscriptionIdKey); // delete

                    return false;
                });
            }
        });
    </script>
</head>
<body>
    <div id="container">
        <h1>
            Telephone call listener
        </h1>
        <div>
            <form id="activationForm" action="javascript:void(0);">
            <fieldset>
                <legend>Product Activation</legend>
                <p>
                    You need to activate before you can listen to incoming telephone calls.
                </p>
                <label for="ActivationKey">
                    Activation Key</label>
                <input name="ActivationKey" type="text" value="" />
                <input type="submit" value="Activate" />
            </fieldset>
            </form>
        </div>
        <div>
            <h2>
                Log
            </h2>
            <p id="log">
            </p>
        </div>
    </div>
</body>
</html>
